import { View, Image} from '@tarojs/components';
import React, { useState } from 'react';
import Taro, { Config, getStorageSync } from '@tarojs/taro';
import { AtAvatar, AtButton, AtDivider, AtNoticebar } from 'taro-ui';
import left from '../image/left.png';
import fk from '../image/fk.png';
import invite from '../image/invite.png';
import NavBar from '../fit';
import './sign.scss'

function Sign() {

  const handleClick = () => {
    Taro.navigateTo({
      url: '/pages/my/index',
    });
  };

  const handleClick1 = () => {

  };
  const [list, setList] = useState(
    [
      {
        imgSrc: fk,
        name: '1天',
        score: '+1',
      },
      {
        imgSrc: fk,
        name: '2天',
        score: '+2',
      },
      {
        imgSrc: fk,
        name: '3天',
        score: '+3',
      },
      {
        imgSrc: fk,
        name: '4天',
        score: '+4',
      },
      {
        imgSrc: fk,
        name: '5天',
        score: '+5',
      },
      {
        imgSrc: fk,
        name: '6天',
        score: '+5',
      },
      {
        imgSrc: fk,
        name: '7天',
        score: '+5',
      }

    ]
  )

  const List1 = list.map((content) => (
    <View className="sign">
      <View className="sign1">
        <View className="img"><Image style="width:35px;height:35px" src={content.imgSrc} onClick={handleClick1}/></View>
        <View className="name1">{content.name}</View>
      </View>
    </View>
  ))

  const [task, settask] = useState(
    [
      {
        imgSrc: invite,
        a: '邀请好友',
        b: '+2',
      },
      {
        imgSrc: invite,
        a: '邀请好友',
        b: '+2',
      },
      {
        imgSrc: invite,
        a: '邀请好友',
        b: '+2',
      },
      {
        imgSrc: invite,
        a: '邀请好友',
        b: '+2',
      },
    ]
  )

  const Task = task.map((content) => (
    <View>
      <View className="task">
        <View className="l">
          <Image className="ll" style="width:20px;height:20px" src={content.imgSrc}></Image>
          <View className="lr">
            <View className="lrl">{content.a}</View>
            <View className="lrr">{content.b}</View>
          </View>
        </View>
        <AtButton className="r" size='small'>前往</AtButton>
      </View>
      <AtDivider height='20' />
    </View>

  ))
  //根据是否登录
  const handleUser = () => {
    const user = getStorageSync('userInfo')
    if (user) {
      return (
        <View className="box11">
          <View className="xt">
            <AtAvatar circle
              image={user.avatarUrl} />
          </View>
          <View className="name">{user.nickName}</View>
        </View>

      )
    } else {
      return (
        <View>
          <View className="xt">
            <AtAvatar circle
              image="https://jdc.jd.com/img/200" />
          </View>
          <View className="name">未登录</View>
        </View>

      )
    }
  }

  const toBack=()=>{
    Taro.navigateBack().then();
  }
  const toHome=()=>{
    Taro.redirectTo({url:"pages/index/index"}).then();
  }

  return (
    <View className="box">
      <NavBar title="任务中心"
              color="#ffffff"
              back={true}
              nback={toBack}
              home={true}
              onHome={toHome}

      />

      <View className="up">
        <View className="box1">

            {
              handleUser()
            }

          <View className="box12">
            <View>规则</View>
            <View className="box122">|</View>
            <View>个人明细</View>
          </View>
        </View>
        <AtDivider height="80" />
        <View className="box2">
          <View className="box21">当前拥有的积分:</View>
          <View className="box22">克数</View>
        </View>
      </View>

      <AtNoticebar icon='volume-plus'>
        完成任务获得积分，积分可以兑换小礼品哟
      </AtNoticebar>

      <View className="box3">
        <View className="day">已连续签到x天</View>
        <View className="list">
          {List1}
        </View>
        <AtDivider height="80" />

      </View>

      <View className="box4">
        <View className="daily">日常任务</View>
        {Task}


      </View>


    </View>

  )
}
export default Sign
